<template>
  <div class="carousel-container">
    <div class="carousel-wrapper" @mouseenter="stopAutoPlay" @mouseleave="startAutoPlay">
      <div class="carousel-track" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
        <div v-for="(slide, index) in slides" :key="index" class="carousel-slide">
          <img :src="slide.imageUrl" :alt="slide.title" />
          <div class="slide-content">
            <h3>{{ slide.title }}</h3>
            <p>{{ slide.description }}</p>
            <a v-if="slide.linkUrl" :href="slide.linkUrl" class="slide-btn">立即开始</a>
          </div>
        </div>
      </div>
      
      <!-- 左右箭头 -->
      <button v-if="slides.length > 1" class="carousel-btn prev" @click="prevSlide">❮</button>
      <button v-if="slides.length > 1" class="carousel-btn next" @click="nextSlide">❯</button>
      
      <!-- 指示器 -->
      <div v-if="slides.length > 1" class="carousel-indicators">
        <span 
          v-for="(slide, index) in slides" 
          :key="index"
          :class="['indicator', { active: index === currentIndex }]"
          @click="goToSlide(index)"
        ></span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const props = defineProps({
  slides: {
    type: Array,
    default: () => []
  },
  autoplay: {
    type: Boolean,
    default: true
  },
  interval: {
    type: Number,
    default: 3000
  }
})

const currentIndex = ref(0)
let timer = null

function nextSlide() {
  currentIndex.value = (currentIndex.value + 1) % props.slides.length
}

function prevSlide() {
  currentIndex.value = currentIndex.value === 0 ? props.slides.length - 1 : currentIndex.value - 1
}

function goToSlide(index) {
  currentIndex.value = index
}

function startAutoPlay() {
  if (props.autoplay && props.slides.length > 1) {
    timer = setInterval(nextSlide, props.interval)
  }
}

function stopAutoPlay() {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
}

onMounted(() => {
  startAutoPlay()
})

onUnmounted(() => {
  stopAutoPlay()
})
</script>

<style scoped lang="scss">
.carousel-container {
  width: 100%;
  height: 380px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.carousel-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

.carousel-slide {
  min-width: 100%;
  height: 100%;
  position: relative;
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .slide-content {
    position: absolute;
    left: 50px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    z-index: 10;
    
    h3 {
      font-size: 36px;
      font-weight: bold;
      margin-bottom: 16px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    p {
      font-size: 18px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
      line-height: 1.6;
      margin-bottom: 20px;
    }
    
    .slide-btn {
      display: inline-block;
      padding: 12px 32px;
      background: white;
      color: #667eea;
      text-decoration: none;
      border-radius: 6px;
      font-weight: 500;
      transition: all 0.3s;
      
      &:hover {
        background: #f8f9fa;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      }
    }
  }
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.3);
  border: none;
  color: white;
  font-size: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 20;
  
  &:hover {
    background: rgba(255, 255, 255, 0.5);
  }
  
  &.prev {
    left: 20px;
  }
  
  &.next {
    right: 20px;
  }
}

.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 20;
  
  .indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    
    &.active {
      background: white;
      width: 30px;
      border-radius: 5px;
    }
    
    &:hover {
      background: rgba(255, 255, 255, 0.8);
    }
  }
}
</style>

